<!DOCTYPE html>

<style type="text/css">
html {
  margin-top:10px;
  padding-top:10px;
}
.appName {
  font-weight:bold;
  border:1px dotted grey;
  padding:5px;
  background-color:#EEE;
}
#prompt, #install, #waiting {
  display:none;
}
#init, #prompt, #install, #waiting {
  float:left;
}
progress {
  float:left;
  width:20%;
  -webkit-transition:0.5s ease-in;
  margin:2px 10px;
}
#percent {
  width:40px;
  color:#AAA;
  float:left;
  text-align:right;
  display:inline-block;
}
button {
  /* background-color:yellow; */
}
#info {
  color:#888;
  display:inline-block;
  width:120px;
  margin:0px 10px;
}
</style>
<script type="text/javascript">
var appName="",appManifest="",origin="";
var port=chrome.extension.connect({name:"infobar"});
window.addEventListener("load",function(){
  port.postMessage({name:"givemethatfish"});

  port.onMessage.addListener(function(msg){
    switch(msg.name) {
      case "ready":
        if (!(msg.appName&&msg.appManifest&&msg.origin)) 
          throw new Error("App name, manifest, or origin not provided!");
        appName=msg.appName;appManifest=msg.appManifest;origin=msg.origin;
        document.getElementsByClassName("appName").forEach(function(e,i,a) {
          ((x=e.innerText)?x:e.innerHTML)=document.encodeURI(appName);
        });
        toggleVisible("init",false,"prompt");
        break;
      case "appInstalled":
        break;
      default:
        break;
    }
  });
},false);

//What a waste of time - a sim :)

/*
window.requestAnimationFrame=
  window.requestAnimationFrame||
  window.webkitRequestAnimationFrame||
  window.mozRequestAnimationFrame||
  window.oRequestAnimationFrame||
  window.msRequestAnimationFrame||
  function(callback) {
    setTimeout(function(){
      callback(+new Date());
    },16);
  };


function step(time) {
  var progress=time-start;
  $("progress").value=progress/100;
  $("percent").innerHTML=Math.round(progress/100)+"%";
  if (progress<10000) {
    window.requestAnimationFrame(step);
  }
  else {
    $("progress").value=100;
    $("percent").innerHTML=100+"%";
    waitForUser();
  }
  if (progress%4000<2000) {
    $("info").innerText="Doing that";
  }
  else {
    $("info").innerText="Doing this";
  }
}
*/
function install() {
  port.postMessage({name:"startInstall"});

  toggleVisible("prompt",false,"install");
  document.getElementById("progress").value="0";
//  window.i=0;

//  window.start=+new Date();
//  window.requestAnimationFrame(step);
/*  An older sim.
  window.interval=setInterval(function() {
    if (i==100) { clearInterval(interval); waitForUser(); }
    else {
      $("progress").value=parseInt($("progress").value)+1;
      $("percent").innerText=parseInt($("progress").value)+1+"%";
      i++;
    }
    if (i%40==20) {
      $("info").innerText="Doing that";
    }
    else if (i%40==0) {
      $("info").innerText="Doing this";
    }
  },100);
*/

  startInstall();
}

function waitForUser() {
  toggleVisible("install",false,"waiting");
  //setTimeout(function(){
  //  $("progress").removeAttribute("value");
  //},0);
}

function $(el) {
  return document.getElementById(el);
}
function toggleVisible(el,bool,el2) {
  $(el).style.display=(!!bool)?"block":"none";
  (el2)?toggleVisible(el2,!bool):null;
}
</script>

<body>
<span id="percent">0%</span>
<progress id="progress" min="0" max="100">
</progress> 
<div id="init">
  <span class="right">Please wait, loading...</span>
</div>
<div id="prompt">
  Do you want to install the Open Web App <span class="appName">Sample App</span>?

    <button onclick="install()">Yes</button>
    <button onclick="window.close()">No</button>
</div>
<div id="install">
  Installing <span class="appName">Sample App</span>...
  <span id="info">loading</span>
  <button onclick="window.close()">Cancel</button>
</div>
<div id="waiting">
  Waiting for the user to accept installation...
</div>
</body>